<template>
    <div class="flex-col">
        <div class="flex1">
            <el-divider content-position="left">普通表单</el-divider>
            <div class="panel _body">
                <el-form ref="form"
                         :model="oForm"
                         :rules="oRules"
                         label-width="14em"
                         class="moduleform">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item prop="name"
                                          label="学校名称:">
                                <el-input v-model="oForm.name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系人:">
                                <el-input v-model="oForm.lxr"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="省市区级联（静态数据）:"
                                          label-width="14em">
                                <comp-citylinkage ref="citylinkage"></comp-citylinkage>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="下拉树:">
                                <wiv-droptree ref="droptree"
                                              :data="aTree"
                                              clearable
                                              placeholder="下拉单选树"
                                              node-key="id"
                                              placement="top-start"
                                              :filter-py-support="true"
                                              :props="oTreeProps"
                                              v-model="oForm.droptreeVal"></wiv-droptree>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item prop="select"
                                          label="下拉模糊搜索（单选）:">
                                <comp-multi-select :data="aSelect"
                                                   clearable
                                                   :multiple="false"
                                                   :bind.sync="oForm.select"></comp-multi-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item prop="multiselect"
                                          label="下拉模糊搜索（多选）:">
                                <comp-multi-select :data="aSelect"
                                                   :bind.sync="oForm.multiselect"></comp-multi-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="递增递减输入框:">
                                <el-input v-model="nNum"
                                          class="moduleinput">
                                    <template slot="append">
                                        <div class="moduleinput-btns">
                                            <i class="moduleinput-btn el-icon-caret-top"
                                               @click="nNum++"></i>
                                            <i class="moduleinput-btn el-icon-caret-bottom"
                                               @click="nNum--"></i>
                                        </div>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="panel _body page-bottom">
            <el-button class="_primary"
                       @click="fSaveClick">保存</el-button>
        </div>
    </div>
</template>

<script>
    import { URLS_DEMO } from '@/urls.js';
    import CompCitylinkage from '@/components/project/citylinkage.vue';//省市区级联（静态数据）
    import CompMultiSelect from '@/components/project/multiselect.vue';//下拉选择框

    //静态数据
    const DATA = {
        //下拉树
        aTree: [
            {
                id: '1',
                label: '一级 1',
                children: [{
                    id: '11',
                    label: '二级 1-1',
                    children: []
                }]
            }, {
                id: '2',
                label: '一级 2',
                children: [{
                    id: '21',
                    label: '二级 2-1',
                    children: []
                }]
            }
        ],
        //下拉选择框
        aSelect: [
            {
                key: 'aa',
                value: '黄金糕1'
            }, {
                key: 'bb',
                value: '双皮奶1'
            }, {
                key: 'dd',
                value: '蚵仔煎1'
            }, {
                key: '4',
                value: '龙须面1'
            }, {
                key: '5',
                value: '北京烤鸭1'
            }, {
                key: '6',
                value: '黄金糕2'
            }, {
                key: '7',
                value: '双皮奶2'
            }, {
                key: '8',
                value: '蚵仔煎2'
            }, {
                key: '9',
                value: '龙须面2'
            }, {
                key: '10',
                value: '北京烤鸭2'
            }, {
                key: '12',
                value: '黄金糕3'
            }, {
                key: '13',
                value: '双皮奶3'
            }, {
                key: '14',
                value: '蚵仔煎3'
            }, {
                key: '15',
                value: '龙须面3'
            }, {
                key: '16',
                value: '北京烤鸭3'
            }
        ],
    };

    export default {
        //**** el, name
        //**** components, directives
        components: {
            CompCitylinkage,
            CompMultiSelect,
        },
        //**** extends, mixins, provide/inject
        //**** props, data, computed
        data() {
            const fGetValidateRule = this.$WIV.fGetValidateRule; //获取验证工厂函数
            return {
                //-- 表单 --
                oForm: {
                    droptreeVal: '',//下拉树
                    select: '',//下拉单选
                    multiselect: [],//下拉多选
                },
                oRules: {//验证规则
                    select: [
                        {
                            ...fGetValidateRule('required'),
                            message: '此项必选'
                        }
                    ],
                    multiselect: [
                        {
                            ...fGetValidateRule('required'),
                            message: '此项必选'
                        }
                    ]
                },
                //-- 下拉树 --
                aTree: DATA.aTree,
                oTreeProps: {//配置
                    label: 'label',
                    children: 'children'
                },
                //-- 下拉选择框 --
                aSelect: DATA.aSelect,
                //-- 递增递减输入框 --
                nNum: 0,
            }
        },
        //**** watch
        //**** 生命周期钩子：mounted, updated, beforeDestroy 等
        mounted() {
            this.$refs.citylinkage.fSetData('江苏', '无锡', '锡山区');//省市区级联赋值
        },
        beforeDestroy() {
        },
        //**** methods
        methods: {
            //*** 开放给父子组件的接口方法
            //*** 事件响应函数
            //保存
            fSaveClick() {
                this.$refs.form.validate(bSuccess => {
                    console.log(bSuccess ? '验证通过' : '验证失败');
                    console.log('城市', this.$refs.citylinkage.fGetData());
                    console.log('表单', this.oForm);
                })
            },
            //*** 其他
        }
        //**** template, render
    }
</script>
